<template>
  <div class="mpnews-box">
    <div class="onlyOne" v-if="obj.articles.length == 1">
      <a :href="obj.articles[0].content_source_url" target="_blank">
        <div class="img-box face">
          <img class="img-cover" :src="obj.articles[0].imgUrl" :alt="obj.articles[0].title">
        </div>
        <div class="title text-overflow">{{ obj.articles[0].title }}</div>
        <div class="desc text-overflow">{{ obj.articles[0].description }}</div>
      </a>
    </div>
    <div class="gtOne" v-else>
      <div :class="['item','item_'+i]" v-for="(art,i) in obj.articles" :key="art.detail_Id">
        <a :href="art.content_source_url" target="_blank">
          <div class="img-box face">
            <img class="img-cover" :src="art.imgUrl" :alt="art.title">
          </div>
          <div class="title text-overflow">{{ art.title }}</div>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    isMe:{
      type:Boolean,
      default:function(){
        return false;
      }
    },//本组件中无用,与其他组件保持格式相同用
    obj:{
      id:String,
      esCompanyId:String,
      articles:Array,
      addTime:String,//添加时间
      editTime:String,//修改时间
    },
  },
  data(){
    return {
      msgtype:'mpnews',
    }
  },
  methods:{
    
  },
  mounted(){
    // console.log(this.obj)
  },
  // "detail_Id": 0,
  // "title": "",
  // "description": "",
  // "author": "",
  // "content_source_url": "",
  // "contentBody": "",
  // "imgUrl": "",
  // "media_Id": ""
}
</script>

<style lang="less" scoped>
.mpnews-box{
  display: inline-block;
  width:260px;
  border: 1px solid #ddd;
  .onlyOne{
    .face{
      height:114px;
      background-color:#ddd;
    }
    .title{
      text-align: left;
      font-size:16px;
      margin:10px 0;
      padding:0 12px;
      color:#111;
    }
    .desc{
      text-align: left;
      font-size:14px;
      padding:0 12px;
      color:#999;
    }
  }
  .gtOne{
    .item{
      text-align: left;
      font-size:16px;
      line-height:20px;
      background-color:#fff;
      .face{
        position: absolute;
        top:10px;bottom:10px;right:10px;
        width:40px;height:40px;
      }
      .title{
        text-align: left;
        line-height:40px;
        position: relative;
        padding-left:10px;
        padding-right:60px;
        padding-top:10px;
        padding-bottom:10px;

      }
    }
    .item_0{
      .face{
        position: relative;
        top:0px;bottom:0px;left:0;right:0px;
        width:100%;height:144px;
      }
      .title{
        position: absolute;
        left:0;right:0;bottom:0;
        text-align: left;
        padding:20px 10px 10px;
        background-image: linear-gradient(-180deg,transparent,rgba(0,0,0,0.35));
        color:#fff;
      }
    }
  }
}
</style>